<template>
  <el-card class="artical-show-container">
    <div slot="header" class="header">
      <div class="search-option">
        <el-input
          style="width: 80%"
          placeholder="请输入文章标题关键字"
          prefix-icon="el-icon-search"
          v-model.trim="searchKey"
        >
        </el-input>
        <el-button
          icon="el-icon-search"
          circle
          @click="handleSearch"
        ></el-button>
      </div>
      <el-button type="warning" icon="el-icon-plus" @click="handleAdd"
        >添加文章</el-button
      >
    </div>
    <div class="main">
      <el-table
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :data="tableData"
        :row-class-name="tableRowClassName"
        :default-sort="{
          prop: ['created_time', 'edited_time'],
          order: 'descending',
        }"
      >
        <el-table-column type="selection" width="60px"> </el-table-column>
        <el-table-column type="index" label="序号" width="60px">
        </el-table-column>
        <el-table-column prop="title" label="文章标题"> </el-table-column>
        <el-table-column prop="description" label="文章描述"> </el-table-column>
        <el-table-column prop="created_time" label="发布时间" sortable>
        </el-table-column>
        <el-table-column prop="edited_time" label="编辑时间" sortable>
        </el-table-column>
        <el-table-column prop="category_name" label="归类"> </el-table-column>
        <el-table-column label="操作" width="118px">
          <template slot-scope="scope">
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="select-option">
        <el-button type="danger" @click="handleDeleteSelected"
          >删除选择</el-button
        >
        <el-button type="primary" @click="handleCancelSelected()"
          >取消选择</el-button
        >
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[3, 5, 8]"
        :page-size="size"
        :total="articleNum"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'Show',
  data() {
    return {
      searchKey: '',
      page: 1,
      // [5, 8]
      size: 5,
      articleNum: 50,
      tableData: [],
    }
  },
  methods: {
    handleSearch() {
      if (this.searchKey == '') {
        this.$message({
          type: 'info',
          message: '输入文章标题关键字不能为空!',
          showClose: true,
          duration: 1000,
        })
        return
      }
      this.$http.get(`/articles?title=${this.searchKey}`).then((res) => {
        if (res.code == 0) {
          this.tableData = res.result
          this.articleNum = res.result.length
        } else {
          // console.log(res.msg)
        }
      })
    },
    handleAdd() {
      this.$router.push('/home/article/add')
    },
    handleEdit(row) {
      this.$router.push(`/home/article/update?id=${row.id}`)
    },
    handleDelete(row) {
      //给提示框后确认删除
      this.$confirm('此操作将永久删除此篇文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$http.delete(`/articles/${row.id}`).then((res) => {
            if (res.code == 0) {
              this.$http
                .get(`/articles?page=${this.page}&size=${this.size}`)
                .then((res) => {
                  if (res.code == 0) {
                    this.tableData = res.result.articles
                    this.articleNum = res.result.total
                  } else {
                    // console.log('res.msg')
                  }
                })
            } else {
              // console.log('res.msg')
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    handleDeleteSelected() {
      if (!this.multipleSelection) {
        return
      }
      //给提示框后确认删除选中项
      this.$confirm('此操作将永久删除选中项文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.multipleSelection.forEach((item) => {
            this.$http.delete(`/articles/${item.id}`).then((res) => {
              if (res.code == 0) {
              } else {
                // console.log('res.msg')
              }
            })
          })
          this.$http
            .get(`/articles?page=${this.page}&size=${this.size}`)
            .then((res) => {
              if (res.code == 0) {
                this.tableData = res.result.articles
                this.articleNum = res.result.total
              } else {
                // console.log('res.msg')
              }
            })
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    handleCancelSelected(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.size = val
      this.$http
        .get(`/articles?page=${this.page}&size=${this.size}`)
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.result.articles
            this.articleNum = res.result.total
          } else {
            // console.log('res.msg')
          }
        })
    },
    handleCurrentChange(val) {
      this.page = val
      this.$http
        .get(`/articles?page=${this.page}&size=${this.size}`)
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.result.articles
            this.articleNum = res.result.total
          } else {
            // console.log('res.msg')
          }
        })
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.is_recommend == 1) {
        return 'isrecommend-row'
      }
    },
  },
  created() {
    this.$http
      .get(`/articles?page=${this.page}&size=${this.size}`)
      .then((res) => {
        if (res.code == 0) {
          this.tableData = res.result.articles
          this.articleNum = res.result.total
        } else {
          // console.log('res.msg')
        }
      })
  },
}
</script>

<style lang="stylus">
// 引入主题配色
@import "styles/theme.styl";
.artical-show-container
  //  height: 100%
  //  border: 1px solid $black
  .header
    display:flex
    justify-content: space-between
    align-items: center
    .search-option
      width: 25%
      display:flex
      justify-content: space-between
      align-items: center
  .main
    .el-table
      .isrecommend-row
        background: rgba(230, 162, 60, 0.2)
  .footer
    display:flex
    flex-direction: column
    justify-content: center
    align-items: center
    margin-top:40px
    .select-option
      width: 100%
      float:left
</style>
